<!-- 
  $subscribe 订阅数据的变更
 -->

<template>
  <h2>Api</h2>
  <button @click="app.$reset()">重置1</button>
  <button @click="product.$reset()">重置2</button>
  <button @click="app.count++">{{ app.count }}</button>
  <button @click="app.$patch({ count: 100 })">$patch object</button>
  <button @click="app.$patch((state) => (state.count = 200))">
    $patch function
  </button>

  <button @click="app.incerment('1000')">动作</button>
</template>

<script lang="ts" setup>
import useAppStore from "../stores/app";
import useProductStore from "../stores/product";

const app = useAppStore();

const product = useProductStore();

/**
 * 订阅 app 仓库的数据变更
 *    mutation  - 突变的一些信息
 *      type
 *          direct          直接修改
 *          patch object    通过$patch对象的方式来修改的
 *          patch function  通过$patch函数的方式来修改的
 *      storeId   当前store的Id
 *    state     - 突变之后的最新数据
 */
app.$subscribe((mutation, state) => {
  // console.log("修改了 mutation", mutation);
  // console.log("修改了 state", state);
  // import { MutationType } from 'pinia'
  // mutation.type; // 'direct' | 'patch object' | 'patch function'
  // 与 cartStore.$id 相同
  // mutation.storeId; // 'cart'
  // 仅适用于 mutation.type === 'patch object'
  // mutation.payload; // 补丁对象传递给 to cartStore.$patch()
  // localStorage.setItem("app", JSON.stringify(state));
});

/**
 * 监听某个仓库的动作的调用
 *    返回值
 *        一个可以停止监听的函数
 */
const unsubscribe = app.$onAction(
  ({
    name, // action 名称
    store, // store 实例，类似 `someStore`
    args, // 传递给 action 的参数数组
    after, // 在 action 返回或解决后的钩子
    onError, // action 抛出或拒绝的钩子
  }) => {
    // debugger;
    // 为这个特定的 action 调用提供一个共享变量
    const startTime = Date.now();
    // 这将在执行 "store "的 action 之前触发。
    console.log(`Start "${name}" with params [${args.join(", ")}].`);

    // 这将在 action 成功并完全运行后触发。
    // 它等待着任何返回的 promise
    after((result) => {
      console.log(
        `Finished "${name}" after ${
          Date.now() - startTime
        }ms.\nResult: ${result}.`
      );
    });

    // 如果 action 抛出或返回一个拒绝的 promise，这将触发
    onError((error) => {
      console.log(
        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
      );
    });
  }
);

// 手动删除监听器
// unsubscribe();
</script>
